import React from 'react'
import asyncLoadComponent from '../common/async-component'
import './my-markdown.css'
import 'highlight.js/styles/github.css'            // 代码语法高亮样式，要手动引入

import rehypeHighlight from 'rehype-highlight'  // 代码语法高亮
import remarkGfm from 'remark-gfm'              // 支持 github 风格（如：表格语法）
import rehypeRaw from 'rehype-raw'              // 编译 html
import remarkMath from 'remark-math'            // 支持数学
// import rehypeKatex from 'rehype-katex'       // 展示数学(不友好)
import rehypeMathjax from 'rehype-mathjax'      // 展示数学

// const CodeBlock = asyncLoadComponent(() => import("./CodeBlock"))
// const MarkdownRender = asyncLoadComponent(() => import("@nteract/markdown"))

// 插件用异步方式不行，报错！！！
// const rehypeHighlight = asyncLoadComponent(() => import("rehype-highlight"))    // 代码语法高亮
// const remarkGfm = asyncLoadComponent(() => import("remark-gfm"))                // 支持 github 风格（如：表格语法）
// const rehypeRaw = asyncLoadComponent(() => import("rehype-raw"))                // 编译 html
// const remarkMath = asyncLoadComponent(() => import("remark-math"))              // 支持数学
// const rehypeMathjax = asyncLoadComponent(() => import("rehype-mathjax"))        // 展示数学
// import ReactMarkdown from 'react-markdown'   // Markdown 组件
const ReactMarkdown = asyncLoadComponent(() => import("react-markdown"))            // Markdown 组件

class MyMarkdown extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div id="mdDiv" style={{ minHeight: 300 }}>
                {/* "@nteract/markdown": "^4.6.2", // 安装不起来 */}
                {/* <MarkdownRender
                    source={this.props.source}
                    renderers={{ code: CodeBlock }}
                /> */}
                {/* 使用参考：https://github.com/remarkjs/react-markdown */}
                <ReactMarkdown
                    children={this.props.source} // 设置内容
                    remarkPlugins={[remarkGfm, remarkMath]}
                    rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeMathjax]}
                />
            </div>
        )
    }
}

export default MyMarkdown